<template>
	<div>
		<view class="kf-box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
			:style="{ position: 'fixed', 'z-index': 999, left: left, top: top }">
			<img @click="BranchFeedback" :src="baseURL + '/static/icon-yjfk.png'" alt="" />
			<!--   open-type="contact"   -->
			<!-- <button style="width: 100%;height: 100%;opacity: 0;position: absolute;top: 0;left:0">客服</button> -->
		</view>

		<div class="comp-scroll">
			<Home :height="systemBarHeight" :menuHeight="menuHeight" :mapData="mapData" v-if="active === 0" />
			<HospitalDepartment :height="systemBarHeight" :menuHeight="menuHeight" v-if="active === 1" />
			<MListComp :height="systemBarHeight" :menuHeight="menuHeight" v-if="active === 2" />
			<HairCommunity :height="systemBarHeight" :menuHeight="menuHeight" v-if="active === 3" />
			<Mine :height="systemBarHeight" :menuHeight="menuHeight" v-if="active === 4" />
		</div>
		<!-- <div class="fix-box">
			<u-tabbar :value="value" :placeholder="false" @change="tabChange" :border="false">
				<u-tabbar-item text="首页" activeColor="#216be6" :icon="baseURL+  '/static/icon_sy.png'">
				</u-tabbar-item>
				<u-tabbar-item class="top-h" activeColor="#216be6" text="消息" dot
					:icon="baseURL+  '/static/icon_xx.png'"></u-tabbar-item>
				<u-tabbar-item text="预约" activeColor="#216be6" :icon="baseURL+  '/static/icon_yy.png'">
				</u-tabbar-item>
				<u-tabbar-item text="毛发社区" activeColor="#216be6"
					:icon="baseURL+  '/static/icon_mfsq.png'"></u-tabbar-item>
				<u-tabbar-item text="我的" activeColor="#216be6" :icon="baseURL+  '/static/icon_wd.png'"></u-tabbar-item>
			</u-tabbar>
		</div> -->

		<div class="u-tabbar-position"></div>
		<div class="u-tabbar" id="tabbar">
			<div class="u-tabbar-item" @click="tabChange(0)">
				<u-icon size="30" v-if="active === 0" :name="baseURL + '/static/svg/首页 2.svg'"></u-icon>
				<u-icon size="30" v-else :name="baseURL + '/static/svg/首页.svg'"></u-icon>
				<div :class="active === 0 ? 'active' : ''">首页</div>
			</div>
			<div class="u-tabbar-item" @click="tabChange(1)" style="position: relative">
				<u-icon size="30" v-if="active === 1" :name="baseURL + '/static/svg/icon-yb-active.svg'"></u-icon>
				<u-icon size="30" v-else :name="baseURL + '/static/svg/icon-yb.svg'"></u-icon>
				<div :class="active === 1 ? 'active' : ''">
					分院
					<!-- 		<div class="message-badge"><u-badge numberType="overflow" type="error" max="99"
							:value="numberDot"></u-badge></div> -->
				</div>
			</div>
			<!-- 	<div class="u-tabbar-item" @click='tabChange(2)'>
				<div class="tabbar-box">
				</div>
				<img class="img-tab" :src="baseURL+  '/static/icon-yybtn.png'" alt="">
				<div class="cover-box"></div>
			</div> -->
			<div class="u-tabbar-item" @click="tabChange(3)">
				<u-icon size="30" v-if="active === 3" :name="baseURL + '/static/svg/毛发社 2.svg'"></u-icon>
				<u-icon size="30" v-else :name="baseURL + '/static/svg/毛发社.svg'"></u-icon>
				<div :class="active === 3 ? 'active' : ''">毛发社区</div>
			</div>
			<div class="u-tabbar-item" @click="tabChange(4)">
				<u-icon size="30" v-if="active === 4" :name="baseURL + '/static/svg/我的 2.svg'"></u-icon>
				<u-icon size="30" v-else :name="baseURL + '/static/svg/我的.svg'"></u-icon>
				<div :class="active === 4 ? 'active' : ''">我的</div>
			</div>
		</div>
	</div>
</template>

<script>
	var QQMapWX = require("../../api/qqmap-wx-jssdk.min.js");
	var qqmapsdk = new QQMapWX({
		key: "LLDBZ-YFGW4-57ZUW-FFH4P-XPUL5-A4BQT",
	});
	import Home from "@/pages/Home/index.vue";
	import MListComp from "@/pages/MListComp/index.vue";
	// import Message from "@/pages/MessageList/index.vue";
	import Mine from "@/pages/Mine/index.vue";
	import HairCommunity from "./HairCommunity/index.vue";
	import HospitalDepartment from "../HospitalDepartment/index.vue";
	import Space from "@/pages/Space/index.vue";
	import store from "@/store/index.js";
	import {
		appMessageList
	} from "@/api/axios/Message.js";
	export default {
		data() {
			return {
				value: 0,
				mapData: {},
				systemBarHeight: "",
				baseURL: this.staticURL,
				active: 0,
				left: "",
				top: "",
				menuHeight: "",
				numberDot: 0,
			};
		},
		components: {
			Home,
			MListComp,
			// Message,
			Mine,
			Space,
			HairCommunity,
			HospitalDepartment,
		},

		methods: {
			BranchFeedback() {
				uni.navigateTo({
					url: "/pages-center/BranchFeedback/index",
				});
			},
			tabChange(name) {
				console.log(name);
				this.active = name;
				uni.setStorageSync("mainIndex", this.active);
			},
			touchstart(e) {
				console.log("touchstart", e);
			},
			touchmove(e) {
				console.log("touchmove", e);
				this.left = e.changedTouches[0].pageX - 30 + "px";
				this.top = e.changedTouches[0].pageY - 30 + "px";
			},
			touchend(e) {
				let towidth = wx.getSystemInfoSync().windowWidth / 2;
				if (e.changedTouches[0].pageX > towidth) {
					this.left = wx.getSystemInfoSync().windowWidth - 70 + "px";
				} else {
					this.left = 0 + "px";
				}
			},
		},

		watch: {
			active: {
				handler: (newValue) => {
					switch (newValue) {
						case 0:
							uni.setNavigationBarTitle({
								title: "首页",
							});
							break;
							// case 1:
							// 	uni.setNavigationBarTitle({
							// 		title: '预约'
							// 	});
							// 	break;
						case 1:
							uni.setNavigationBarTitle({
								title: "消息",
							});
							break;
						case 2:
							uni.setNavigationBarTitle({
								title: "毛发社区",
							});
							break;
						case 3:
							uni.setNavigationBarTitle({
								title: "我的",
							});
							break;
						default:
							break;
					}
				},
				immediate: true,
				deep: true,
			},
		},
		onShareAppMessage() {
			this.clue({
				action: "1",
				eventType: "1",
			});
			return {
				title: "大麦毛发医疗",
				path: "/pages/Login/index",
			};
		},
		onLoad: function() {
			this.clue({
					relationId: "",
					action: "8",
					eventType: "2",
				},
				180000
			);
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query
				.select("#tabbar")
				.boundingClientRect((data) => {
					uni.setStorageSync("tabbarHeight", data.height);
				})
				.exec();
		},
		onShow() {
			uni.hideHomeButton();
			if (uni.getStorageSync("mainIndex")) {
				this.active = uni.getStorageSync("mainIndex");
			} else {
				this.active = 0;
			}

			// uni.getSystemInfo({
			//   success: (res) => {
			//     this.systemBarHeight = res.statusBarHeight;
			//   },
			// });

			let res = uni.getSystemInfoSync();
			let menu = wx.getMenuButtonBoundingClientRect();
			this.systemBarHeight =
				(menu.top - res.statusBarHeight) * 2 + menu.height + res.statusBarHeight;
			if (res.model.indexOf("iPhone") > -1) {
				this.systemBarHeight += 4;
			}

			this.menuHeight = res.statusBarHeight;
			uni.setStorageSync("systemBarHeight", this.systemBarHeight);
			uni.setStorageSync("menuHeight", this.menuHeight);
			let _this = this;
			uni.getLocation({
				type: "gcj02",
				success: function(res) {
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude,
						},
						complete(mapData) {
							console.log(mapData);
							mapData.result.location = {
								lat: res.latitude,
								lng: res.longitude,
							};
							_this.mapData = mapData.result;
							store.state.mapData = mapData.result;
							let localCoordinate =
								mapData.result.location.lat + "," + mapData.result.location.lng;
							uni.setStorageSync("mapData", localCoordinate);
							console.log("mapData", mapData);
						},
					});
				},
			});

			let customerId = uni.getStorageSync("customerId");
			let openId = uni.getStorageSync("openId");
			appMessageList({
				params: {
					openId,
					customerId,
				},
			}).then((res) => {
				let numberDot = 0;
				res.forEach((item) => {
					numberDot += item.notViewedCount;
				});
				console.log(numberDot);
				this.numberDot = numberDot;
			});
		},
	};
</script>

<style lang="scss">
	.circle {
		width: 20vw;
		height: 10vw;
		border-radius: 0 0 50px 50px;
		box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.1);
		position: absolute;
		top: 50%;
		background-color: #fff;
	}

	.u-tabbar-item:nth-of-type(3999) {
		/* border-radius: 50%;
		flex: 0 !important;
		transform: translateY(-50%);
		padding: 20rpx; */
		/* background-color: #fff; */
		/* transform: scale(1.2, 1.2) translateY(-25%); */
		padding: 0;
		position: relative;

		.tabbar-box {
			width: 20vw;
			height: 20vw;
			position: absolute;
			transform: translateY(-45%);
			padding: 20rpx;
			background-color: #fff;
			border-radius: 50%;
			box-shadow: 0px -3px 6px rgba(140, 140, 140, 0.2);
			z-index: -1;

			img {
				width: 20vw;
				height: 20vw;
			}
		}

		.cover-box {
			width: 21vw;
			height: 21vw;
			position: absolute;
			padding: 25rpx;
			background-color: #fff;
			border-radius: 0;
		}
	}

	/deep/ .u-tabbar-item:nth-of-type(3) .u-icon__img {
		position: relative;
		z-index: 999;
	}

	.u-tabbar-item:nth-of-type(3) .u-tabbar-item__text {
		color: #fff !important;
	}

	.u-tabbar--fixed {
		box-shadow: -3px -3px 6px rgba(140, 140, 140, 0.2);
	}

	/* .tabbar-bottom {
		background: url('http://62.234.10.148/static/icon-bg.png') center;
	} */
	.u-tabbar {
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		justify-content: space-between;
		background-color: #fff;
		padding-bottom: env(safe-area-inset-bottom);
		// box-shadow: 3px -3px 1px rgba(140, 140, 140, 0.2);
	}

	.u-tabbar-item {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		padding: 10rpx;

		box-sizing: border-box;
		color: #616161;
	}

	.active {
		color: #2e75e8;
		background-color: rgba(0, 0, 0, 0) !important;
	}

	/* 
	.u-tabbar-position {
		height: 200rpx;
		padding-bottom: env(safe-area-inset-bottom);
	} */

	.comp-scroll {
		height: calc(100vh - env(safe-area-inset-bottom) - 58px);
		overflow: scroll;
	}

	.kf-box {
		position: fixed;
		right: 0rpx;
		// padding: 10rpx;
		padding-right: 20rpx;
		border-radius: 50%;
		top: 70%;
		width: 70px;
		height: 70px;
		padding: 0 !important;

		button {
			display: none;
		}

		// background-color: #add0e8;
	}

	.kf-box img {
		width: 60px;
		height: 60px;
	}

	.img-tab {
		width: 20vw;
		height: 20vw;
		position: absolute;
		transform: translateY(-45%);
		padding: 20rpx;
		background-color: #fff;
		border-radius: 50%;
		z-index: 999 !important;
		/* img */
	}

	.message-badge {
		position: absolute;
		top: 0;
		right: 40rpx;
	}
</style>